<template xmlns="http://www.w3.org/1999/html">
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      :inline="inline"
      label-width="80px"
      label-position="left"
      ref="form"
    >
      <template v-for="(control, index) of controlList">
        <template
          v-if="['checkbox-group', 'radio-group'].includes(control.type)"
        >
          <!--          <br />-->
        </template>
        <el-form-item :label="control.label" :prop="control.prop">
          <template v-if="control.type === 'input'">
            <el-input
              :value="formData[control.prop]"
              @input="(event) => change(control.prop, event)"
              @clear="(event) => change(control.prop, event)"
              :clearable="control.clearable"
            ></el-input>
          </template>
          <template v-else-if="control.type === 'cascaderList'">
            <div style="display: flex; flex-direction: column; row-gap: 10px">
              <div
                v-for="(value, index) of formData[control.prop]"
                style="display: flex; align-items: center"
              >
                <div style="flex: 1; min-width: 0">
                  <el-cascader
                    :options="control.optionList"
                    :clearable="true"
                    style="width: 100%"
                    :style="{ width: control.width ? control.width : '100%' }"
                    @change="(event) => control.change({ event, index })"
                    :value="value"
                  ></el-cascader>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    column-gap: 10px;
                    margin-left: 10px;
                  "
                >
                  <div style="flex: 1 0 auto">
                    <el-button @click="control.listAdd(index)" type="success"
                      >添加</el-button
                    >
                  </div>
                  <div style="flex: 1 0 auto">
                    <el-button @click="control.listRemove(index)" type="danger"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="control.type === 'textarea'">
            <el-input
              :value="formData[control.prop]"
              @input="(event) => change(control.prop, event)"
              @clear="(event) => change(control.prop, event)"
              :clearable="control.clearable"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              :maxlength="1000"
              :show-word-limit="true"
            ></el-input>
          </template>
          <template v-else-if="control.type === 'autocomplete'">
            <el-autocomplete
              :value="formData[control.prop]"
              @input="(event) => change(control.prop, event)"
              @select="(event) => change(control.prop, event)"
              @clear="(event) => change(control.prop, event)"
              :clearable="control.clearable"
              :fetch-suggestions="control.query"
              :style="{ width: control.width }"
            >
              <template slot-scope="{ item }">
                <div>{{ item.label }}</div>
              </template>
            </el-autocomplete>
          </template>
          <template v-else-if="control.type === 'avatar'">
            <SingleUpload
              :form-data="formData"
              :control="control"
              :upload="avatarUpload"
            ></SingleUpload>
          </template>
          <template v-else-if="control.type === 'checkbox-group'">
            <el-checkbox-group
              v-model="formData[control.prop]"
              @change="control.change"
            >
              <el-checkbox
                v-for="(checkbox, index) of control.checkboxList"
                :key="index"
                :label="checkbox.value"
                >{{ checkbox.label }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else-if="control.type === 'select'">
            <el-select
              v-model="formData[control.prop]"
              @change="control.change"
              style="width: 100%"
              :clearable="control.clearable"
            >
              <el-option
                v-for="(item, index) of control.optionList"
                :value="item.value"
                :key="index"
                >{{ item.label }}</el-option
              >
            </el-select>
          </template>
          <template v-else-if="control.type === 'multipleSelect'">
            <el-select
              v-model="formData[control.prop]"
              @change="control.change"
              style="width: 100%"
              :clearable="control.clearable"
              :multiple="true"
            >
              <el-option
                v-for="(item, index) of control.optionList"
                :value="item.value"
                :key="index"
                >{{ item.label }}</el-option
              >
            </el-select>
          </template>
          <template v-else-if="control.type === 'radio-group'">
            <el-radio-group
              v-model="formData[control.prop]"
              @change="control.change"
            >
              <el-radio
                v-for="(item, index) of control.radioList"
                :label="item.value"
                :key="index"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </template>
          <template v-else-if="control.type === 'daterange'">
            <el-date-picker
              v-model="formData[control.prop]"
              @change="control.change"
              @clear="control.change"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>
        </el-form-item>
        <template
          v-if="['checkbox-group', 'radio-group'].includes(control.type)"
        >
        </template>
      </template>
      <el-form-item
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <template v-if="type === 'search'">
          <div>
            <el-button type="primary" @click="search">筛选</el-button>
          </div>
        </template>
        <template v-else-if="type === 'submit'">
          <div
            style="
              display: flex;
              justify-content: flex-end;
              align-items: center;
            "
          >
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="primary" @click="entry">确认</el-button>
          </div>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { upload } from "@/api/upload";
import { showCreateOk, showCreateNg } from "@/utils/message/index";
import { formItemChange } from "@/utils/form/index";
import SingleUpload from "@/views/component/single-upload";
export default {
  name: "Form",
  components: {
    SingleUpload,
  },
  props: {
    width: {
      type: String,
    },
    type: {
      type: String,
      default: "search",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    formData: {
      type: Object,
    },
    controlList: {
      type: Array,
    },
  },
  computed: {
    rules() {
      return this.getRules();
    },
  },
  methods: {
    async avatarUpload(prop, data, control) {
      try {
        let result = await upload(data, (event) => {
          control.setProgress(event);
        });
        this.change(prop, result.data.url);
        showCreateOk();
      } catch (error) {
        showCreateNg();
      }
    },
    entry() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return;
        }
        this.$emit("entry", this.formData);
      });
    },
    cancel() {
      this.$router.back();
    },
    search() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return;
        }
        this.$emit("search", this.formData);
      });
    },
    getRules() {
      let rules = {};
      for (let i = 0; i < this.controlList.length; i++) {
        let control = this.controlList[i];
        rules[control.prop] = control.rule;
      }
      return rules;
    },
    change(prop, event) {
      formItemChange(this.controlList, prop, event);
    },
  },
};
</script>
